<!-- pages -->
<template>
	<div class="bg">
		<showtitle showtitle="看点"></showtitle>

		<ul class="TopNav">
			<li v-for="(item,index) in titles" @click="changeSwiper(index)" :class="{ 'select': activePage === index }">
				{{item}}
			</li>
		</ul>


		<swiper class="swiper-container content_portion" @slideChange="onSlideChange" ref="mySwiper">
			
			
			<swiper-slide class="swiper-slide" v-for="(item,index) in titles" :key="item.title">
				<div class="card" v-for="(page,pageindex) in pagesData"
					@click="openPage(page.pageID)" v-if="page.domain==item || item=='综合' ">
					<div class="left_box">
						<div class="left_box_title">{{page.title}}</div>
						<div class="flex_bottom">
							<div>{{page.domain}}</div>
							<div>{{formatDate(page.timestamp)}}</div>
							<div class="left_box_bottom">{{page.hot}}人看过</div>
						</div>
					</div>
					<div class="right_box">
						<img :src="getSrc(page.pageID,page.imgs)" />
					</div>
				</div>
			</swiper-slide>
		
		</swiper>
		
		<div class="submit" @click="$router.push('/publish')">
			<img class="animation1" :src="require('@/assets/icons/发布.jpg')"/>
		</div>
		
		
		<div class="placeblock"></div>
	</div>

</template>

<script>
	export default {
		name: "pages",
		components: {

		},
		computed: {

		},
		data() {
			return {
				titles: ['综合','感兴趣的', '农学', '农法', '环保'],
				activePage: 0,

				items: [], // 现有数据列表  
				page: 1, // 当前页码  
				hasMore: true, // 是否有更多数据  
				sLoading: false, // 是否正在加载数据
				pagesData: [],




			};
		},
		beforeDestroy() {
			// 在组件销毁前卸载Swiper  
			this.$refs.mySwiper.swiperInstance.destroy(true,
			true); // 第二个参数为true会重置swiper到初始状态，第三个参数为true会移除swiper内部的dom元素  
		},
		mounted() {
			this.solvePages();
			this.getPages(1, 100);
			
		},
		methods: {
			 formatDate(timestamp) {  
			      const date = new Date(timestamp); // JavaScript时间戳是以毫秒为单位的，所以需要乘以1000  
			      const month = this.padZero(date.getMonth() + 1); // getMonth()返回的月份是从0开始的，所以需要加1  
			      const day = this.padZero(date.getDate());  
			      return `${month}月${day}日`;  
			    },  
			    padZero(num) {  
			      return num < 10 ? '0' + num : num;  
			    },
			
			getSrc(pageID,imgs) {
				if (imgs==0) {
					return `${this.IP}/pages_image/normal.jpg`;
				} else {
					return `${this.IP}/pages_image/${pageID}/0.jpg`;
				}
			},
			getMyLinkedPages(){
				this.axios.get(`${this.IP}/get_my_linked_pages`, {
						params: {
							token: this.getStorage('token')
						}
					}).then(res => {
						let pages = res.data;

						if( typeof(pages) != 'string'){
							pages.forEach(e=>{
								e.domain="感兴趣的";
								e.pageID=e.pageId;
								this.pagesData.push(e);
							})
						}else{
							this.$toast.showMessage(res.data);
						}
						
					})
					.catch(error => {
						console.error(error);
					});
			},
			getPages(page, size) {
				this.axios.get(`${this.IP}/get_all_pages`, {
						params: {
							page: page,
							size: size
						}
					}).then(res => {
						this.pagesData = res.data;
						this.getMyLinkedPages();
					})
					.catch(error => {
						console.error(error);
					});
			},
			openPage(i){
				
				if(this.getStorage('token') != null){
					this.axios.get(`${this.IP}/open_page`, {
							params: {
								id: i,
								token: this.getStorage('token')
							}
						}).then(res => {
							this.$router.push(`/pagedetail?pageID=${i}`);
						})
						.catch(error => {
							console.error(error);
						});
				}else{
					this.$router.push(`/pagedetail?pageID=${i}`);
				}
				
				
			},
			onSlideChange() {
				this.activePage = this.$refs.mySwiper.swiperInstance.activeIndex;
			},
			changeSwiper(e) {
				this.$refs.mySwiper.swiperInstance.activeIndex = e;
				this.activePage = e;
			},
			solvePages() {
				this.pagesData.forEach(e => {
					if (e.title.length > 20) {
						e.title = e.title.slice(0, 21) + "...";
					}
				});
			},
			getinfo() {
				this.axios.get('https://192.168.43.87:8080/generate_register_code').then(res => {
					console.log(res);
				});
			}
		}
	};
</script>

<style scoped>
.animation1{
	animation: 10s shake infinite alternate-reverse;
}

.submit img {  
    position: fixed;  
    bottom: 10vh;  
    width: 96px;  
    height: 96px;  
    z-index: 11;  
    left: 44vw;  
    border: 1px solid #ebebeb;  
    border-radius: 50%;  
    /* 添加阴影来增强立体感 */  
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 -2px 4px rgba(0, 0, 0, 0.2);  
}
	.swiper-container{
		height: auto;
	}
	.swiper-slide{
		height: auto;
	}
	.TopNav {
		display: flex;
		justify-content: space-around;
		align-items: center;
		border: 1px solid #ebebeb;
		background-color: #f3f3f3;
		margin: 0 auto;
		width: 99vw;
	}

	.TopNav li {
		display: flex;
		flex-direction: column;
		padding: 3vw;
		color: #333;
	}

	.TopNav li.select {
		border-bottom: 2px solid #fc9b39;
		color: #fc9b39;
		font-weight: bold;
	}


	.card {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-start;
		flex-wrap: nowrap;
	}

	.right_box img {
		max-width: 25vw;
		width: 176px;
		height: 172px;
		border-radius: 10px;
		padding: 10px;
	}

	.left_box {
		flex: 1;
		max-width: 63vw;
		height: 20vw;
		display: flex;
		flex-direction: column;
		padding: 2vw 1vw 2vw;
		position: relative;

	}

	.left_box_title {
		width: 53vw;
		font-weight: bold;
		font-size: 32px;
		color: #111;
	}

	.flex_bottom {
		position: absolute;
		width: 53vw;
		bottom: 0;
		color: #666;
		display: flex;
		justify-content: space-around;
	}

	.left_box_bottom {
		width: 40%;
		text-align: center;
	}
</style>